<template>
  <more-view
    :class="viewFlag ? 'flex' : 'hidden'"
    class="fixed top-0 left-0 w-full h-full bg-[#222222aa] z-[999999] justify-center items-center"
  >
    <div
      class="w-[80%] lg:w-[45vw] h-[90vh] bg-white rounded-xl shadow-lg relative overflow-hidden"
    >
      <close-button
        @click="viewFlag = !viewFlag"
        class="close-button flex justify-center items-center w-12 h-8 absolute right-0 hover:bg-[red] cursor-pointer z-[999]"
        ><svg
          t="1698497746910"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="6031"
          width="20"
          height="20"
        >
          <path
            d="M571.01312 523.776l311.3472-311.35232c15.7184-15.71328 15.7184-41.6256 0-57.344l-1.69472-1.69984c-15.7184-15.71328-41.6256-15.71328-57.34912 0l-311.3472 311.77728-311.35232-311.77728c-15.7184-15.71328-41.63072-15.71328-57.344 0l-1.69984 1.69984a40.0128 40.0128 0 0 0 0 57.344L452.92544 523.776l-311.35232 311.35744c-15.71328 15.71328-15.71328 41.63072 0 57.33888l1.69984 1.69984c15.71328 15.7184 41.6256 15.7184 57.344 0l311.35232-311.35232 311.3472 311.35232c15.72352 15.7184 41.63072 15.7184 57.34912 0l1.69472-1.69984c15.7184-15.70816 15.7184-41.6256 0-57.33888l-311.3472-311.35744z"
            p-id="6032"
          ></path></svg
      ></close-button>
      <div class="w-full h-full absolute">
        <el-tabs class="w-full h-full" type="border-card">
          <el-tab-pane label="关注" class="w-full h-full overflow-y-scroll">
            <div class="w-full h-[80vh]">
              <UserFan v-for="i in 20" :key="i"></UserFan>
            </div>
          </el-tab-pane>
          <el-tab-pane label="粉丝" class="w-full h-full overflow-y-scroll">
            <div class="w-full h-[80vh]">
              <UserFan v-for="i in 20" :key="i"></UserFan>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </more-view>
  <div class="w-full h-full rounded-xl overflow-hidden">
    <!-- 头部 -->
    <header
      class="w-full h-40 flex flex-wrap items-center border-b-[1px] relative"
    >
      <el-avatar
        class="relative left-6"
        :size="100"
        :src="
          userStore.userInfo.avatar
            ? userStore.userInfo.avatar
            : USER_DEFAULT_AVATAR
        "
        @error.once="setDefaultImage"
      />
      <span class="relative left-12 bottom-4 text-[1.2rem]">{{
        userStore.isLogin
          ? userStore.userInfo.nickname
            ? userStore.userInfo.nickname
            : "没起名的懒人一个"
          : "未登录"
      }}</span>
      <span class="absolute left-40 top-[3.5rem] svg-text"
        >[
        {{
          userStore.userInfo.signature
            ? userStore.userInfo.signature
            : "个性签名"
        }}]</span
      >
      <ul class="flex absolute left-36 top-20">
        <li
          @click="toOpenView"
          :class="userStore.isLogin ? 'cursor-pointer' : ''"
        >
          关注-
          {{
            userStore.userInfo.followCount < 9999
              ? userStore.userInfo.followCount
              : (userStore.userInfo.followCount / 10000).toFixed(1) + "万"
          }}
        </li>
        <li
          @click="toOpenView"
          :class="userStore.isLogin ? 'cursor-pointer' : ''"
          class="ml-16"
        >
          粉丝-
          {{
            userStore.userInfo.followerCount < 9999
              ? userStore.userInfo.followerCount
              : (userStore.userInfo.followerCount / 10000).toFixed(1) + "万"
          }}
        </li>
      </ul>
      <ul class="option-menu">
        <router-link to="/user"> <li>作品</li></router-link>
        <router-link to="/user/favorite"> <li>收藏</li></router-link>
        <router-link to="/user/collection"> <li>喜欢</li></router-link>
      </ul>
    </header>
    <!-- 内容 -->
    <user-body class="w-full h-[calc(100vh-10rem)]">
      <router-view>
        <template #default="{ Component, route }">
          <keep-alive>
            <component
              :is="Component"
              v-if="route.meta.keepAlive"
              :key="route.meta?.key"
            />
          </keep-alive>
          <component
            :is="Component"
            v-if="!route.meta.keepAlive"
            :key="route.fullPath"
          />
        </template>
      </router-view>
    </user-body>
  </div>
</template>

<script setup>
import { useUserStore } from "@/stores/user.js";
import { ref } from "vue";
import UserFan from "../components/UserFan.vue";
import { USER_DEFAULT_AVATAR } from "@/define/cizzy";

let viewFlag = ref(false);

const userStore = useUserStore();
function setDefaultImage(e) {
  e.target.src = USER_DEFAULT_AVATAR;
  e.srcElement.onerror = null;
}

function toOpenView() {
  if (userStore.isLogin) {
    viewFlag.value = !viewFlag.value;
  }
}
</script>

<style lang="scss" scoped>
.link-active-son {
  color: var(--logo-color);
  font-weight: bold;
}

.option-menu {
  display: flex;
  width: 100%;
  li {
    width: 6rem;
    height: 2rem;
    font-size: 1.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.close-button {
  svg {
    width: 1rem;
  }
  &:hover {
    svg {
      fill: white;
    }
  }
}
</style>